<template>
  <div>
    <pt-search :params="params" :config="config" label-width="110px" @search="search"/>
    <pt-table
      :columns="columns"
      :dataSource="tableData"
      :options="options"
      :fetch="getTableList"
      :pagination="pagination" />
  </div>
</template>

<script>
  import { freightTemplateListPage } from '@/api/sc_other.js'
  export default {
    data() {
      return {
        columns: [{ // 表单配置
          label: "模板名称", minWidth: 140, align: "left", prop: 'name'
        },{
          button: true, label: "操作", width: 60,
          group: [{
            name: "查看", type: "text", onClick: row => this.addModel(row.id)
          }]
        }],
        pagination: { total: 0, page: 0, size: 10, curPage: 1 }, // 分页
        options: { // 表单外观
          mutiSelect: false, //  多选则 mutiSelect
          index: false, // 显示序号
          loading: false, // 表格动画
          initTable: false, // 是否一挂载就加载数据
          expand: false // 折叠
        },
        config: [{
          key: 'name', type: 'input', label: '模板名称', placeholder: '请输入模板名称关键字'
        },{
          key: 'page', type: 'button', group: [{
            name: '查询', type: 'primary', onClick: () => { }
          },{
            name: '重置', type: 'info', onClick: () => this.reset()
          },{
            name: '新增运费模板', type: 'primary', plain: true, onClick: () => this.addModel()
          }]
        }],
        params: { // 查询参数
          page: 0,
          size: 10,
          businessId: null,
          name: ''
        },
        tableData: [], //表单数据
        deliveryDialog: true // 新增修改模板弹窗
      }
    },
    methods: {
      getTableList() { // 运费模板列表
        this.options.loading = true
        const params = {...this.params }
        params.page = this.pagination.page
        params.size = this.pagination.size
        params.businessId = this.$route.query.id
        freightTemplateListPage(params).then(res => {
          if (res.success) {
            this.tableData = res.data.list
            this.pagination.total = res.data.total
          }
        }).finally(() => {
          this.options.loading = false
        })
      },
      search() { // 搜索
        this.pagination.curPage = 1
        this.pagination.page = 0
        this.getTableList()
      },
      reset() { // 重置
        this.pagination.curPage = 1
        for (const key in this.params) {
          if (key === 'page') {
            this.pagination.page = 0
          } else if (key === 'size') {
            this.pagination.size = 10
          } else {
            this.params[key] = ''
          }
        }
        this.getTableList()
      },
      addModel(cid) { // 打开新增模板
        this.$router.push({
          path: '/main/sc_shop/addDelivery',
          query: { id: this.$route.query.id, cid }
        })
      }
    },
    mounted() {
      this.params.businessId = this.$route.query.id
      this.getTableList()
    }
  }
</script>

<style scoped>

</style>
